{% extends "chart/base.twig" %}
{% block content %}

{{ parent() }}

{{ hook('publish_before_content', chart, user) }}

<script type="text/javascript">
dw.backend.ready(function() {
    require(['dw/chart/publish'], function(publish) {
        publish.init('{{ chartUrl }}');
    });
});
</script>

<style type="text/css">
.dw-create-publish .row {
    display: flex;
}
.dw-create-publish .span5,
.dw-create-publish .span7 {
    float: none;
    position: relative;
}
</style>

<div class="dw-create-publish chart-editor">
    <div class="row">
        <div class="span5 publish-step {% if chart.lastEditStep > 4 %}is-published{% endif %}">
        {% if user.isGuest %}
            {{ svelte('publish/guest', svelte_data) }}
        {% elseif not user.isActivated %}
            {{ svelte('publish/pending-activation', svelte_data) }}
        {% else %}
            {% include "chart/publish/activated.twig" %}
        {% endif %}
        </div>

        <div class="span7">
            <div class="messages"></div>
            <iframe
                src="{{ chartUrlLocal }}"
                id="iframe-vis"
                style="position:sticky;top:20px;width:{{ embedWidth }};height:{{ embedHeight }}"
                scrolling="no"
                allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen
            ></iframe>
        </div>
    </div>
</div>

{% endblock %}
